<template>
  <!-- 就业 行业 -->
  <div id="main" ref="pieEchart" class="pieEchart" style="width: 100%; height: 100%" />
</template>

<script>
// import * as echarts from 'echarts'
export default {
  name: 'PieEchart',
  data() {
    return {
      property: 'value'
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      //   准备好DOM 初始化 echart 实例
      //   var myChart = this.$echarts.init(document.getElementById('main'))
      // 同一个页面使用多次会出现数据覆盖的问题 只会显示一个页面 解决方法使用ref
      const myChart = this.$echarts.init(this.$refs.pieEchart)
      // 声明颜色数组
      const myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6']
      //   绘制图标
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        color: ['#2f89cf'],
        // 图标位置
        grid: {
          top: '10%',
          left: '22%',
          bottom: '10%'
          // containLabel: true
        },
        xAxis: {
          show: false
        },

        yAxis: [
          {
            type: 'category',
            inverse: true,
            data: ['印尼', '美国', '印度', '中国', '世界人口'],
            // 不显示y轴线条
            axisLine: {
              show: false
            },
            // 不显示刻度
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#fff'
            }
          },
          {
            show: true,
            inverse: true,
            data: [702, 350, 610, 793, 664],
            // 不显示y轴的线
            axisLine: {
              show: false
            },
            // 不显示刻度
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: '#fff'
              }
            }
          }
        ],
        series: [
          {
            name: '条',
            type: 'bar',
            data: [70, 34, 60, 78, 69],
            // 给series  第一个对象里面的 添加
            yAxisIndex: 0,
            // 柱子之间的距离
            barCategoryGap: 50,
            // 柱子的宽度
            barWidth: 10,
            // 柱子设为圆角
            itemStyle: {
              normal: {
                barBorderRadius: 20,
                color: function(params) {
                  // params 是传进来的每个柱子的对象
                  // 、dataIndex是当前柱子的索引号
                  return myColor[params.dataIndex]
                }
              }
            },

            // 图形上的文本标签
            label: {
              normal: {
                show: true,
                // 图形内显示
                position: 'inside',
                // 文字的显示格式
                formatter: '{c}%'
              }
            }
          },
          {
            name: '框',
            type: 'bar',
            barCategoryGap: 50,
            barWidth: 15,
            itemStyle: {
              color: 'none',
              borderColor: '#00c1de',
              borderWidth: 3,
              barBorderRadius: 15
            }, // 给series  第一个对象里面的 添加
            yAxisIndex: 1,
            data: [70, 34, 60, 78, 69]
          }
        ]
      })
      // 监听 window窗口大小变化的事件 自适应
      window.onresize = function() {
        // console.log('屏幕变化了')
        myChart.resize()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// .pieEchart {
//   width: 100%;
//   height: 100%;
// }
</style>

